import {ScrollView} from 'react-native-gesture-handler';
import {StyleSheet, Text, View, Image, ImageBackground, Alert} from 'react-native';
import React, {Component} from 'react';
import {Flex, WhiteSpace, Button, List, Toast, InputItem, Modal, PickerView, Radio} from '@ant-design/react-native';
import Item from '@ant-design/react-native/lib/list/ListItem';
import store from '~/store';
import {getOrderInfoByItemID, createTakeOrder, getParkingPackageInfo, getOrderInfo, receiveOrderItem} from '~/api/order';
import {GetUserAddressInfo} from '~/api/owner';
import {getHttpUrl} from '~/api/basic';
import {setParkingOrderDepositState} from '~/api/parking';
import moment from 'moment';
const RadioItem = Radio.RadioItem;
export default class PackageOrder extends Component {
    static navigationOptions = ({navigation}) => {
        return {
            title: '订单详情',
        };
    };
    constructor(props) {
        super(props);
        const getters = store.getState();
        this.state = {
            takeOrderDataId: this.props.navigation.getParam('takeOrderDataId'),
            giftType: this.props.navigation.getParam('giftType'), //1引流礼品  2车位礼品
            list: [],
            orderlist: [], //礼品列表
            orderinfo: '', //车位赠品订单详情
            number: '', //商品数量
            imageurl: '',
            baseurl: '',
        };
        this.getlist();
        getHttpUrl().then((r) => {
            if (r.code === 0) {
                this.setState({
                    baseurl: r.data,
                });
            }
        });
    }
    getlist() {
        if (this.state.gifttype === 1) {
            //引流礼品
            this.getGiftInfo();
        } else {
            //车位赠品
            this.getpackageInfo();
        }
    }
    getGiftInfo = () => {
        getOrderInfoByItemID({
            item_id: this.state.takeOrderDataId,
        }).then((r) => {
            if (r.code === 0) {
                this.setState({
                    orderinfo: r.data.order_info,
                    list: r.data.item_list,
                    number: r.data.item_list.length,
                });
            } else {
                console.log(r.msg);
            }
        });
    };
    getpackageInfo = () => {
        getOrderInfo({
            order_id: this.state.takeOrderDataId,
        }).then((r) => {
            if (r.code === 0) {
                let itemlist = [];
                itemlist = r.data.item_list;
                itemlist.forEach((item, index) => {
                    item.select = true;
                    item.radioid = false;
                });
                this.setState({
                    list: itemlist,
                    orderinfo: r.data.order_info,
                    number: r.data.item_list.length,
                });
            } else {
                Alert.alert(r.msg);
            }
        });
    };
    comfirepackage = (itemid) => {
        receiveOrderItem({item_id: itemid}).then((r) => {
            if (r.code === 0) {
                this.getlist();
            }
        });
    };
    render() {
        return (
            <View style={{width: '100%', height: '100%', paddingTop: 10}}>
                <ScrollView>
                    <View style={{width: '94%', marginLeft: '3%', marginRight: '3%', height: '90%', paddingBottom: 10}}>
                        <Flex direction={'column'} style={{width: '100%', backgroundColor: 'white', borderRadius: 10, marginBottom: 10}}>
                            <Flex style={{width: '100%', height: 63, backgroundColor: 'white', borderRadius: 10}}>
                                <Flex style={{width: '13%'}} justify={'center'}>
                                    <Image style={{width: 16.5, height: 20}} source={require('~/assets/li/weizhi.png')} />
                                </Flex>
                                <Flex direction={'column'} style={{width: '79%'}}>
                                    <Flex style={{width: '100%'}}>
                                        <Text style={{fontSize: 14, fontWeight: 'bold', color: '#393B46'}}>{this.state.orderinfo.ReceiveName}</Text>
                                        <Text style={{fontSize: 13, fontWeight: '500', color: '#8F959D', paddingLeft: 8.5}}>
                                            {this.state.orderinfo.ReceivePhone}
                                        </Text>
                                    </Flex>
                                    <Flex>
                                        <Text style={{width: '100%', fontSize: 13, color: '#393B46', fontWeight: '500'}} numberOfLines={2}>
                                            {this.state.orderinfo.ReceiveCityName}
                                            {this.state.orderinfo.ReceiveAddress}
                                        </Text>
                                    </Flex>
                                </Flex>
                                {/*<Flex style={{width: '8%'}} justify={'center'}>*/}
                                {/*    <Image style={{width: 12, height: 12}} source={require('~/assets/li/right.png')} />*/}
                                {/*</Flex>*/}
                            </Flex>
                            <Flex
                                justify={'end'}
                                style={{width: '100%', backgroundColor: 'white', borderRadius: 10, paddingRight: 10, paddingBottom: 5}}>
                                <Text>订单状态：</Text>
                                <Text>
                                    {this.state.orderinfo.OrderState === 2 && '待审核'}
                                    {this.state.orderinfo.OrderState === 3 && '审核失败'}
                                    {this.state.orderinfo.OrderState === 1 &&
                                        (this.state.orderinfo.ExpressState === 1 || this.state.orderinfo.ExpressState === 0) &&
                                        '备货中'}
                                    {this.state.orderinfo.OrderState === 1 && this.state.orderinfo.ExpressState === 5 && '部分发货'}
                                    {this.state.orderinfo.OrderState === 1 && this.state.orderinfo.ExpressState === 2 && '已发货'}
                                    {this.state.orderinfo.OrderState === 1 && this.state.orderinfo.ExpressState === 3 && '已收货'}
                                </Text>
                            </Flex>
                        </Flex>
                        <View>
                            {this.state.list.map((item, index) => {
                                return (
                                    <View
                                        style={{
                                            width: '100%',
                                            backgroundColor: 'white',
                                            marginTop: 10,
                                            paddingLeft: 10,
                                            paddingRight: 10,
                                            paddingBottom: 10,
                                            borderRadius: 10,
                                        }}>
                                        <Flex
                                            onPress={() => {
                                                this.props.navigation.push('GiftInfo', {
                                                    params: item.ProductDataID,
                                                });
                                            }}
                                            style={{width: '100%', marginTop: 10}}>
                                            <Flex style={{width: '25%'}}>
                                                <Image
                                                    style={{width: '100%', aspectRatio: 1 / 1}}
                                                    source={{uri: this.state.baseurl + item.ProductImage}}
                                                />
                                            </Flex>
                                            <Flex direction={'column'} style={{width: '75%', aspectRatio: 3 / 1, paddingLeft: 10}}>
                                                <Flex style={{width: '100%', height: '60%'}} justify={'start'} align={'start'}>
                                                    <Text
                                                        numberOfLines={2}
                                                        style={{paddingTop: 5, fontSize: 13, fontWeight: '500', color: '#393B46'}}>
                                                        {item.ProductName}
                                                    </Text>
                                                </Flex>
                                                <Flex style={{width: '100%', height: '40%', paddingBottom: 5}} align={'end'} justify={'between'}>
                                                    <Flex>
                                                        <Text style={{color: '#FF0600', fontSize: 13, fontWeight: 'bold'}}>￥{item.PriceMarket}</Text>
                                                        <Text style={{paddingLeft: 10, color: '#BBBBBB', fontSize: 10, fontWeight: '500'}}>
                                                            共1件
                                                        </Text>
                                                    </Flex>
                                                </Flex>
                                            </Flex>
                                        </Flex>
                                        <Flex>
                                            {item.OrderExpressID > 10 && (
                                                <View style={{width: '80%'}}>
                                                    <View
                                                        style={{
                                                            width: '100%',
                                                            backgroundColor: 'white',
                                                            borderRadius: 10,
                                                            paddingLeft: 10,
                                                        }}>
                                                        {/*<Text style={{fontSize: 13, fontWeight: '500', color: '#8F959D'}}>*/}
                                                        {/*    {item.ExpressName} {item.ExpressNO}*/}
                                                        {/*</Text>*/}
                                                        <Text
                                                            onPress={() => {
                                                                this.props.navigation.push('LogInformation', {
                                                                    orderExpressId: item.OrderExpressID,
                                                                    ExpressState: this.state.orderinfo.ExpressState,
                                                                });
                                                            }}
                                                            style={{
                                                                fontSize: 12,
                                                                width: 90,
                                                                height: 24.5,
                                                                lineHeight: 24.5,
                                                                borderWidth: 1,
                                                                borderColor: 'gray',
                                                                borderRadius: 12,
                                                                color: 'gray',
                                                                textAlign: 'center',
                                                                marginLeft: 5,
                                                            }}>
                                                            查看物流详情
                                                        </Text>
                                                    </View>
                                                </View>
                                            )}
                                            {item.OrderExpressID > 10 && this.state.orderinfo.OrderState === 1 && item.TakeDelivery === 0 && (
                                                <Flex
                                                    onPress={() => {
                                                        this.comfirepackage(item.OrderItemID);
                                                    }}
                                                    style={{width: '20%', height: 30, paddingRight: 10}}>
                                                    <ImageBackground style={{width: 65.8, height: 24.5}} source={require('~/assets/li/queding.png')}>
                                                        <Text
                                                            style={{
                                                                color: 'white',
                                                                fontSize: 12,
                                                                fontWeight: 'bold',
                                                                textAlign: 'center',
                                                                paddingTop: 5,
                                                            }}>
                                                            确认收货
                                                        </Text>
                                                    </ImageBackground>
                                                </Flex>
                                            )}
                                            {item.TakeDelivery === 1 && (
                                                <Flex style={{width: '20%', height: 30, paddingRight: 10}}>
                                                    <ImageBackground style={{width: 65.8, height: 24.5}} source={require('~/assets/li/queding.png')}>
                                                        <Text
                                                            style={{
                                                                color: 'white',
                                                                fontSize: 12,
                                                                fontWeight: 'bold',
                                                                textAlign: 'center',
                                                                paddingTop: 5,
                                                            }}>
                                                            已收货
                                                        </Text>
                                                    </ImageBackground>
                                                </Flex>
                                            )}
                                        </Flex>
                                    </View>
                                );
                            })}
                        </View>

                        <>
                            <View
                                style={{
                                    width: '100%',
                                    backgroundColor: 'white',
                                    marginTop: 10,
                                    borderRadius: 10,
                                    padding: 10,
                                }}>
                                <Text>下单时间：{moment(this.state.orderinfo.RegDateTime).format('YYYY.MM.DD')}</Text>
                                <Text>订单号码：{this.state.orderinfo.OrderNo}</Text>
                            </View>
                            <View
                                style={{
                                    width: '100%',
                                    backgroundColor: 'white',
                                    marginTop: 10,
                                    borderRadius: 10,
                                    padding: 10,
                                }}>
                                <Text>商品数量：{this.state.number}</Text>
                            </View>
                        </>
                    </View>
                </ScrollView>
            </View>
        );
    }
}
const styles = StyleSheet.create({});
